<template>
  <div id="amap"/>
</template>

<script>

import Coordinate from '@/components/map/coordinate'
import CalculateSizeorAltitude from '@/assets/js/utils/CalculateSizeorAltitude'
import { mapState } from 'vuex'
export default {
  name: 'OneMap',
  props: {
    baseLayers: {
      type: Array,
      default() {
        return []
      }
    },
    center: {
      type: Array,
      default() {
        return [128.02, 47.12197]
      }
    }
  },
  data() {
    return {
      map: undefined,
      mapService: undefined
    }
  },
  mounted() {
    const map = new mapboxgl.Map({
      container: 'amap',
      style: {
        version: 8,
        sprite: '',
        glyphs: '',
        sources: {},
        layers: []
      },
      units: 'degree',
      crs: 'EPSG:4490',
      center: this.center,
      zoom: 5,
      maxZoom: 17,
      trackResize: true
    })
    map.addControl(new Coordinate(), 'bottom-left')
    map.addControl(new mapboxgl.NavigationControl(), 'top-right')
    map.addControl(new mapboxgl.ScaleControl({}))
    this.$emit('oneMapInstanceComplete', map)
  },
  methods: {
  }
}
</script>

<style scoped>
  #amap {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .mapbox-gl-draw_trash{
    display: none;
  }
</style>
